
<template>
	<!-- 底部导航 -->
	<view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
		<view class="tabbar-item" v-for="(item, index) in list" :key="index">
			<view  class="item-img" v-if="current == index">
				<image :src="item.iconPath"></image>
				<text>{{item.text}}</text>
			</view>
			<view class="item-img1" v-else  @click="tabbarChange(item.path)">
				<image :src="item.icon"></image>
				<text>{{item.text}}</text>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			current: String
		},
		data() {
			return {
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				list: [{
						text: '首页', //首页
						icon: '/static/Navigation1.png', //未选中图标
						iconPath: '/static/Navigation2.png', //选中图片
						path: "/pages/index/index", //页面路径
					},
					{
						text: '消息接收', //消息接收
						icon: '/static/Navigation3.png',
						iconPath: '/static/Navigation4.png',
						path: "/pages/messages/index",
					},
					{
						text: '车辆定位', //通话记录
						icon: '/static/nowcar.png',
						iconPath: '/static/nowcar.png',
						path: "/packageA/pages/index",
					},
					
					{
						text: '我的', //我的
						icon: '/static/Navigation7.png',
						iconPath: '/static/Navigation8.png',
						path: "/pages/PersonalCenter/index",
					}
				]
			};
		},
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
		},
		watch: {

		},
		methods: {
			tabbarChange(path) {
				console.log(path)
				console.log(123)
				uni.reLaunch({
					url: path
				})
			}
		}
	};
</script>

<style scoped>


.tabbar {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		box-shadow: inset 0rpx 1rpx 0rpx 0rpx rgba(238, 238, 238, 1);
		display: flex;
		justify-content: space-between;
	}


	.tabbar .tabbar-item {
		width: 33%;
		height: 100rpx;
		cursor: pointer;

	}

	.tabbar .tabbar-item {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 22rpx;
		font-weight: 500;
		letter-spacing: 0rpx;
		line-height: 20rpx;
		color: rgba(153, 153, 153, 1);
		text-align: center;
		vertical-align: top;
	}

	.tabbar .tabbar-item image {
		width: 40rpx;
		height: 40rpx;
		margin-bottom: 4rpx;
	}
	
	.tabbar .tabbar-item text{
		display: block;
		font-size: 21upx;
		font-weight: bold;
	}



	/* 选中后 */
	.item-img text{
		color: #F04D3E;
	}

	/* 选中前 */
	.item-img1 text{
		color: #000;
	}
</style>
